<template>
	<view class="chonse_car">
		<view class=" car_top fulled" style="z-index: 30;">
			<tm-dropDownMenu :unColor="!$tm.vx.state().tmVuetify.black ? 'black' : 'whtie'" @confirm="confirm" :list="list2"></tm-dropDownMenu>
		</view>
		<view class="left_bar">
			<tm-sliderNav @change="change" :list="list" :width='200' bg-color='#f4f4f4'></tm-sliderNav>
		</view>
		<view class="car_details">
			<view class="details_title">
				<span>全部</span> 你想要的都在这儿
			</view>
			<view class="car_type">
			<CarType  @click='toOrder' v-for="(item,index) in data" :key="item.AC001"  :data="item"></CarType>
			</view>
		</view>
         
	</view>
</template>

<script>
	import CarType from "../../compoments/CarType.vue"
export default {
	components:{
		CarType
	},
	onLoad() {
		this.getCarList()
	},
	data() {
		return {
			default1:'',
			brand:'',
			price:'',
			ctype:'',
			data:[],
			list:[
					{title:'推荐',id:''},
					{title:'经济型',id:1},
					{title:'精英型',id:2},
					{title:'高端车',id:3},
					{title:'XRV专区',id:4},
					{title:'运动型',id:5},
					{title:'舒适型',id:''},
					{title:'新能源',id:''},
					{title:'商务型',id:''},
					{title:'优惠区',id:''},
					{title:'SUV',id:''},
				],
			list2: [
				{
					title: '排序',
					children: [
						{
							title: '默认排序',
							model: 'radio',
							name: 'desc',
							children: [
								{
									title: '默认排序',
									id: '0'
								},
								{
									title: '价格从高到低',
									id: '1'
								},
								{
									title: '价格从低到高',
									id: '2'
								}
							]
						}
					]
				},
				{
					title: '车型',
					children: [
						{
							title: '价格排序',
							name: 'priceDesc',
							model: 'radio',
							children: [
								{
									title: '本田',
									id: 1
								},
								{
									title: '奥迪',
									id: 2
								},
								{
									title: '大众',
									id: 3
								},
								{
									title: '别克',
									id: 4
								},
								{
									title: '日产',
									id: 5
								}
	
							]
						}
					]
				},
				{
					title: '品牌',
					children: [

						{
							title: '自定价格',
							name: 'customPrice',
							model: 'slider',
							suffix: '元',
							max: 1000,
							value: 0
						},
					]
				}
			]
		};
	},
	methods: {
		confirm(e) {
			console.log('您选中了的数据为：', e);
			if(e[0].children.length !==0){
					this.default1 =  e[0].children[0].title 
			};
			 if (e[1].children.length!==0 ){
				this.brand = e[1].children[0].id
				this.getCarList(this.brand)
			};
			if(e[2].children.length!==0 ){
				this.price = e[2].children[0].value 
			}
		
			
		},
		change(e){
			console.log(e)
			this.ctype = e
			this.getCarList(this.brand,this.ctype)
		},
		async getCarList(brand = 0,ctype = 0){
			const Rres = await  this.$wxRequest({
				url:'/wx/carsearch',
				method:'POST',
				data:{
					brand:brand,
					ctype:ctype
				}
			})
			console.log(Rres)
			if(Rres.data.code == 200){
				this.data = Rres.data.data
			}
		}

	}
};
</script>

<style lang="scss" scoped>
.chonse_car{
	width: 100%;
	height: 100%;
	.car_top{
		position: fixed;
		top: 0;
	}
	.left_bar{
		position: fixed;
		height: 1200rpx;
		    left: 0;
		    top: 90rpx;
	}
	.car_details{
		background-color: #ffffff;
    margin-top: 95rpx;
    margin-left: 205rpx;
	.details_title{
		padding: 20rpx;
		span{
			color: black;
			font-size: 32rpx;
		}
		font-size: 28rpx;
		color: #8c8c8c;
	}
	}
	.car_type{
	
	}
}
</style>
